<template>
  <Modal class="storyteller-settings" @close="$emit('close')">
    <font-awesome-icon 
      @click="$emit('close')" 
      icon="times-circle" 
      class="modal-close"
    />
    <div class="modal-header">
      <font-awesome-icon icon="crown" />
      设置说书人信息
    </div>
    
    <div class="storyteller-form">
      <!-- 说书人名称输入 -->
      <div class="form-group">
        <label for="storyteller-name">说书人名称</label>
        <input
          id="storyteller-name"
          v-model="localName"
          type="text"
          placeholder="请输入说书人名称"
          maxlength="20"
          class="name-input"
        />
        <div class="input-hint">
          <span class="char-count">{{ localName.length }}/20</span>
        </div>
      </div>
      
      <!-- 星级选择 -->
      <div class="form-group">
        <label>说书人星级</label>
        <div class="star-level-options">
          <div 
            v-for="level in starLevels" 
            :key="level.value"
            class="star-option"
            :class="{ active: localStarLevel === level.value }"
            @click="localStarLevel = level.value"
          >
            <div class="star-icon">{{ level.icon }}</div>
            <div class="star-text">{{ level.label }}</div>
          </div>
        </div>
      </div>
      
      <!-- 预览显示 -->
      <div class="form-group">
        <label>显示预览</label>
        <div class="preview-display">
          <span class="preview-text">{{ getDisplayName() }}</span>
        </div>
      </div>
    </div>
    
    <div class="modal-footer">
      <button @click="$emit('close')" class="cancel-btn">
        取消
      </button>
      <button @click="saveSettings" class="save-btn">
        <font-awesome-icon icon="save" />
        保存设置
      </button>
    </div>
  </Modal>
</template>

<script>
import Modal from "./Modal";

export default {
  name: "StorytellerSettingsModal",
  components: {
    Modal
  },
  data() {
    return {
      localName: '',
      localStarLevel: 'trainee',
      starLevels: [
        { value: 'trainee', label: '实习', icon: '🌟' },
        { value: 'one_star', label: '一星', icon: '⭐' },
        { value: 'two_star', label: '二星', icon: '⭐⭐' }
      ]
    };
  },
  
  mounted() {
    this.loadCurrentSettings();
  },
  
  methods: {
    loadCurrentSettings() {
      // 从localStorage加载当前设置
      const savedName = localStorage.getItem('storyteller_name') || '';
      const savedStarLevel = localStorage.getItem('storyteller_star_level') || 'trainee';
      
      this.localName = savedName;
      this.localStarLevel = savedStarLevel;
    },
    
    getDisplayName() {
      if (!this.localName.trim()) {
        const starIcon = this.starLevels.find(level => level.value === this.localStarLevel)?.icon || '🌟';
        return `【${starIcon}】说书人`;
      }
      
      const starIcon = this.starLevels.find(level => level.value === this.localStarLevel)?.icon || '🌟';
      return `【${starIcon}】说书人·${this.localName.trim()}`;
    },
    
    saveSettings() {
      // 保存到localStorage
      localStorage.setItem('storyteller_name', this.localName.trim());
      localStorage.setItem('storyteller_star_level', this.localStarLevel);
      
      // 通知父组件设置已更新
      this.$emit('settings-updated', {
        name: this.localName.trim(),
        starLevel: this.localStarLevel,
        displayName: this.getDisplayName()
      });
      
      this.$emit('close');
      
      // 显示成功提示
      this.$store.dispatch("players/showToast", {
        type: "success",
        message: "说书人设置已保存"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.storyteller-settings {
  .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #FFD700;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
  }
  
  .storyteller-form {
    .form-group {
      margin-bottom: 24px;
      
      label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: white;
        margin-bottom: 8px;
      }
      
      .name-input {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid rgba(255, 215, 0, 0.3);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        font-size: 14px;
        transition: all 0.3s ease;
        
        &:focus {
          outline: none;
          border-color: #FFD700;
          box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
        }
        
        &::placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
      }
      
      .input-hint {
        display: flex;
        justify-content: flex-end;
        margin-top: 4px;
        
        .char-count {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
        }
      }
      
      .star-level-options {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        
        .star-option {
          flex: 1;
          min-width: 120px;
          padding: 16px 12px;
          border: 2px solid rgba(255, 215, 0, 0.3);
          border-radius: 8px;
          background: rgba(0, 0, 0, 0.4);
          cursor: pointer;
          transition: all 0.3s ease;
          text-align: center;
          
          &:hover {
            border-color: rgba(255, 215, 0, 0.6);
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px);
          }
          
          &.active {
            border-color: #FFD700;
            background: rgba(255, 215, 0, 0.2);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
          }
          
          .star-icon {
            font-size: 24px;
            margin-bottom: 8px;
          }
          
          .star-text {
            font-size: 14px;
            font-weight: 500;
            color: white;
          }
        }
      }
      
      .preview-display {
        padding: 16px;
        border: 2px solid rgba(255, 215, 0, 0.3);
        border-radius: 8px;
        background: rgba(255, 215, 0, 0.1);
        text-align: center;
        
        .preview-text {
          font-size: 16px;
          font-weight: 600;
          color: #FFD700;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
  
  .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    .cancel-btn, .save-btn {
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }
    }
    
    .cancel-btn {
      background: rgba(108, 117, 125, 0.8);
      border: 1px solid rgba(108, 117, 125, 0.6);
      color: white;
      
      &:hover {
        background: rgba(108, 117, 125, 1);
        border-color: rgba(108, 117, 125, 0.8);
      }
    }
    
    .save-btn {
      background: linear-gradient(135deg, #FFD700, #FFA500);
      border: 1px solid #FFD700;
      color: #1a1a1a;
      box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
      
      &:hover {
        background: linear-gradient(135deg, #FFA500, #FF8C00);
        border-color: #FFA500;
        box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
      }
    }
  }
  
  // 移动端适配
  @media (max-width: 768px) {
    .storyteller-form {
      .form-group {
        .star-level-options {
          flex-direction: column;
          
          .star-option {
            min-width: auto;
          }
        }
      }
    }
    
    .modal-footer {
      flex-direction: column;
      
      .cancel-btn, .save-btn {
        width: 100%;
        justify-content: center;
      }
    }
  }
}
</style>